<template>
  <Header></Header>
  <div class="note-container">
    <!-- 左侧：文档树 -->
    <div class="note-tree">
      <div class="tree-header">
        <h3>我的笔记</h3>
        <el-button type="primary" size="small" @click="addRootNote">+ 新建笔记</el-button>
      </div>
      <el-tree
          v-if="treeData.length"
          :data="treeData"
          node-key="id"
          :props="{ label: 'title', children: 'children' }"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :default-expand-all="true"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label || '未命名' }}</span>
            <span class="tree-node-actions">
              <el-button
                  type="text"
                  size="small"
                  @click.stop="addChildNote(data)"
                  title="添加子笔记"
              >
                ➕
              </el-button>
            </span>
          </span>
        </template>
      </el-tree>
      <div v-else class="empty-tree">暂无笔记，点击“新建笔记”开始</div>
    </div>
    <!-- 右侧：文章内容 -->
    <div class="note-editor">
      <el-card v-if="currentNote" class="editor-card">
        <!-- 标题区域移到卡片内容部分，确保与编辑态保持一致的顺序 -->
        <!-- 标题和内容区域合并，确保标题始终在内容上方 -->
        <div class="note-content-container">
          <!-- 点击可编辑、移出可渲染的标题区域 - 不显示输入框但可编辑 -->
          <div 
            class="title-editable"
            @click.stop="startEditingTitle"
          >
            <h1 
              class="note-title" 
              v-text="currentNote.title || '未命名'"
              :contenteditable="isEditingTitle"
              @blur="finishEditingTitle"
              @keyup.enter="finishEditingTitle"
              @keyup.esc="cancelEditingTitle"
              @input="handleTitleChange"
            ></h1>
          </div>
          <!-- 点击可编辑、移出可渲染的内容区域 -->
          <div 
            class="editor-content-area"
            :class="{ 'content-editing': isEditingContent }"
            @click="startEditingContent"
          >
          <div v-if="isEditingContent" class="content-edit-wrapper">
            <el-input
              v-model="currentNote.content"
              type="textarea"
              :autosize="{ minRows: 20 }"
              placeholder="请输入笔记内容...支持Markdown语法"
              class="content-input"
              ref="contentInput"
              @blur="finishEditingContent"
              @input="handleContentChange"
            />
            <div class="edit-tips">提示：点击编辑器外部或按Ctrl+S保存后查看渲染效果</div>
          </div>
          <div v-else class="content-preview-wrapper">
              <!-- 使用 marked 渲染 -->
              <div class="content-preview" v-html="renderedContent"></div>
              <div class="editing-hint">点击此处开始编辑</div>
            </div>
          </div>
        </div>
      </el-card>
      <div v-else class="empty-editor">
        <el-empty description="请选择左侧笔记或新建一个" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { marked } from 'marked'; // 引入 marked 库
import noteApi from '@/api/note'
import Header from "@/components/Header.vue";
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

// 初始化 marked 配置，使其更符合 Typora 风格
marked.setOptions({
  gfm: true, // 支持 GitHub Flavored Markdown
  breaks: true, // 将换行符转换为 <br>
  pedantic: false,
  smartLists: true,
  smartypants: true
});

const banners = ref([])
const courses = ref([])

// 编辑状态控制
const isEditingTitle = ref(false)
const isEditingContent = ref(false)
// 内容变更计时器，用于防抖
const contentChangeTimer = ref(null)
// 原始内容备份，用于取消编辑
const editingBackup = ref(null)
// 笔记数据
const treeData = ref([])
const currentNote = ref(null)
const originalNote = ref(null) // 用于取消时恢复
const userId = ref(1) // 实际应从登录信息获取
// 模板引用
const contentInput = ref(null)

// ========== 计算属性 ==========
// 使用 marked 渲染内容
const renderedContent = computed(() => {
  if (!currentNote.value?.content) return ''
  try {
    return marked.parse(currentNote.value.content)
  } catch (error) {
    console.error('Markdown 渲染失败:', error)
    return '<p style="color: red;">渲染失败，请检查内容格式。</p>'
  }
})

// ========== 生命周期钩子 ==========
onMounted(() => {
  // 添加键盘事件监听，支持Ctrl+S保存
  window.addEventListener('keydown', handleKeydown)
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
  // 加载树数据
  loadTree()
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeydown)
  window.removeEventListener('resize', handleResize)
})

// ========== 方法 ==========
// 标题编辑相关方法
const startEditingTitle = () => {
  if (!isEditingTitle.value) {
    isEditingTitle.value = true
    // 等待DOM更新后聚焦可编辑的h1元素
    nextTick(() => {
      const titleElement = document.querySelector('.note-title')
      if (titleElement) {
        titleElement.focus()
        const range = document.createRange()
        range.selectNodeContents(titleElement)
        const selection = window.getSelection()
        selection.removeAllRanges()
        selection.addRange(range)
      }
    })
  }
}

const handleTitleChange = (event) => {
  if (isEditingTitle.value && currentNote.value) {
    const newTitle = event.target.textContent.trim()
    currentNote.value.title = newTitle || '未命名'
  }
}

const finishEditingTitle = () => {
  isEditingTitle.value = false
  saveNote()
}

const cancelEditingTitle = () => {
  if (isEditingTitle.value && currentNote.value && originalNote.value) {
    currentNote.value.title = originalNote.value.title
  }
  isEditingTitle.value = false
}

// 内容编辑相关方法
const startEditingContent = () => {
  if (!isEditingContent.value) {
    editingBackup.value = { ...currentNote.value }
    isEditingContent.value = true
    nextTick(() => {
      if (contentInput.value) {
        contentInput.value.focus()
      }
    })
  }
}

const finishEditingContent = () => {
  isEditingContent.value = false
  saveNote()
}

const handleContentChange = () => {
  if (contentChangeTimer.value) {
    clearTimeout(contentChangeTimer.value)
  }
  contentChangeTimer.value = setTimeout(() => {
    saveNote()
  }, 2000)
}

// 键盘事件处理
const handleKeydown = (event) => {
  // Ctrl+S 保存
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault()
    saveNote()
  }
  // Esc 取消编辑
  if (event.key === 'Escape') {
    if (isEditingTitle.value) {
      cancelEditingTitle()
    } else if (isEditingContent.value) {
      isEditingContent.value = false
      if (editingBackup.value) {
        currentNote.value = { ...editingBackup.value }
        editingBackup.value = null
      }
    }
  }
}

// 处理窗口大小变化
const handleResize = () => {
  // 窗口大小变化时可以根据需要调整内容区域
}

// ========== 笔记数据操作 ==========
const loadTree = async () => {
  try {
    const res = await noteApi.getNoteTree(userId.value)
    if (res && res.code === 100) {
      treeData.value = res.data || []
    }
  } catch (error) {
    console.error('加载笔记树失败:', error)
    treeData.value = []
    ElMessage.error('加载失败，请稍后重试')
  }
}

const handleNodeClick = async (note) => {
  try {
    // 检查当前是否有未保存的更改
    if (hasUnsavedChanges()) {
      ElMessageBox.confirm('有未保存的更改，确定要切换到其他笔记吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await loadNoteDetail(note.id)
      }).catch(() => {
        // 用户取消操作，保持当前选中的节点
      })
    } else {
      await loadNoteDetail(note.id)
    }
  } catch (error) {
    console.error('切换笔记失败:', error)
    ElMessage.error('切换笔记失败')
  }
}

// 加载笔记详情
const loadNoteDetail = async (noteId) => {
  try {
    const res = await noteApi.getNoteDetail(noteId)
    if (res && res.code === 100) {
      currentNote.value = { ...res.data }
      originalNote.value = { ...res.data }
    }
  } catch (error) {
    console.error('获取笔记详情失败:', error)
    ElMessage.error('加载笔记详情失败')
  }
}

const addRootNote = async () => {
  await createNote({ parentId: null })
}

const addChildNote = async (parent) => {
  await createNote({ parentId: parent.id })
}

const createNote = async ({ parentId }) => {
  try {
    const newNote = {
      userId: userId.value,
      title: '未命名笔记',
      content: '',
      parentId: parentId
    }
    const res = await noteApi.addNote(newNote)
    if (res && res.code === 100) {
      ElMessage.success('新建成功')
      await loadTree()
    }
  } catch (error) {
    console.error('创建笔记失败:', error)
    ElMessage.error('创建笔记失败')
  }
}

// 保存笔记 - 修复userID被删除问题
const saveNote = async () => {
  try {
    if (!currentNote.value) {
      console.error('当前没有选中的笔记')
      ElMessage.error('未找到当前笔记')
      return
    }
    const { id, title, content, parentId } = currentNote.value
    // 添加userId参数，修复保存时userID被删除的问题
    await noteApi.updateNote(id, { userId: userId.value, title, content, parentId })
    ElMessage.success('保存成功')
    updateTreeNodeTitle(treeData.value, id, title)
    // 更新原始笔记数据
    originalNote.value = { ...currentNote.value }
  } catch (error) {
    console.error('保存笔记失败:', error)
    ElMessage.error('保存失败，请重试')
  }
}

const updateTreeNodeTitle = (nodes, id, title) => {
  for (let node of nodes) {
    if (node.id === id) {
      node.title = title
      break
    }
    if (node.children) {
      updateTreeNodeTitle(node.children, id, title)
    }
  }
}

// 取消编辑
const cancelEdit = () => {
  try {
    // 检查是否有未保存的更改
    if (hasUnsavedChanges()) {
      // 使用Element UI的确认对话框
      ElMessageBox.confirm('有未保存的更改，确定要取消编辑吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetEditState()
      }).catch(() => {
        // 用户取消操作
      })
    } else {
      resetEditState()
    }
  } catch (error) {
    console.error('取消编辑异常:', error)
    resetEditState() // 即使出错也要尝试重置状态
  }
}

// 重置编辑状态
const resetEditState = () => {
  try {
    if (originalNote.value) {
      currentNote.value = { ...originalNote.value }
    }
    // 重置编辑状态
    isEditingTitle.value = false
    isEditingContent.value = false
    editingBackup.value = null
  } catch (error) {
    console.error('重置编辑状态异常:', error)
  }
}

// 检查是否有未保存的更改
const hasUnsavedChanges = () => {
  try {
    if (!currentNote.value || !originalNote.value) {
      return false
    }
    return currentNote.value.content !== originalNote.value.content || 
           currentNote.value.title !== originalNote.value.title
  } catch (error) {
    console.error('检查未保存更改异常:', error)
    return false // 出错时假设没有未保存更改
  }
}
</script>

<style lang="scss" scoped>
/* 全局样式 - 防止页面整体滚动 */
* {
  box-sizing: border-box;
}
html, body {
  overflow: hidden; /* 禁止页面整体滚动 */
  height: 100%;
}
/* 全局容器样式 */
.note-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  top: 60px;
  height: calc(90vh + 5px);
  backdrop-filter: blur(10px);
  transition: all 0.5s ease;
  overflow: hidden; /* 确保容器不滚动 */
}
/* 左侧树样式 - 优化版 */
.note-tree {
  width: 350px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(200, 200, 200, 0.3);
}
/* 优化树节点渲染样式 */
.note-tree .el-tree {
  background: transparent;
  height: 100%;
}
.note-tree .el-tree-node__content {
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  margin: 2px 10px;
  transition: all 0.2s ease;
}
.note-tree .el-tree-node__content:hover {
  background-color: rgba(102, 126, 234, 0.1);
}
.note-tree .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(102, 126, 234, 0.2);
  color: #667eea;
  font-weight: 500;
}
.note-tree .custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.note-tree .tree-node-actions {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.note-tree .el-tree-node__content:hover .tree-node-actions {
  opacity: 1;
}
.tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 笔记内容容器 - 确保标题和内容区域顺序一致 */
.note-content-container {
  padding: 20px;
  position: relative;
}
/* 可编辑标题区域样式 */
.title-editable {
  flex: 1;
  margin-right: 20px;
  cursor: text; /* 显示文本编辑光标 */
  transition: all 0.2s ease;
  position: relative;
}
.title-editable:hover {
  background-color: rgba(102, 126, 234, 0.05);
  border-radius: 4px;
}
/* 笔记标题样式 */
.note-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
  padding: 10px 0;
  border-radius: 4px;
  line-height: 1.3;
  transition: all 0.2s ease;
  min-height: 1.3em;
  text-align: left; /* 设置默认左对齐 */
  outline: none; /* 移除默认焦点轮廓 */
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
}
.title-editable:hover .note-title,
.note-title[contenteditable="true"] {
  color: #667eea;
}
/* 使可编辑标题保持美观 */
.note-title[contenteditable="true"] {
  background-color: rgba(102, 126, 234, 0.05);
  border: 1px dashed transparent;
  transition: border-color 0.3s;
}
.note-title[contenteditable="true"]:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
/* 编辑器操作按钮组 */
.editor-actions {
  display: flex;
  gap: 8px;
}
/* 编辑器内容区域样式 */
.editor-content-area {
  min-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 20px;
}
.editor-content-area:hover {
  background-color: rgba(102, 126, 234, 0.05);
}
/* 内容编辑模式 */
.content-edit-wrapper {
  position: relative;
}
.content-input {
  width: 100%;
  min-height: 400px;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  transition: border-color 0.3s;
}
.content-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  outline: none;
}
/* 编辑提示 */
.edit-tips {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 12px;
  color: #999;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
/* 内容预览模式 */
.content-preview-wrapper {
  position: relative;
  min-height: 300px;
  max-height: calc(100vh - 350px); /* 调整最大高度，考虑标题占用空间 */
  overflow-y: auto; /* 允许内容区域垂直滚动 */
  overflow-x: hidden;
}
/* 渲染内容样式 - 增强版 */
.content-preview {
  font-size: 16px;
  line-height: 1.7;
  color: #34495e;
  word-break: break-word;
  text-align: left; /* 确保左对齐 */
  max-width: 100%; /* 防止内容溢出 */
  padding: 0; /* 移除内部padding，让内容紧贴边界 */
}
/* 标题样式 - 调整为更大更明显 */
.content-preview h1, .content-preview h2, .content-preview h3, 
.content-preview h4, .content-preview h5, .content-preview h6 {
  margin-top: 1.8em;
  margin-bottom: 1em;
  font-weight: 700; /* 加粗更明显 */
  line-height: 1.35;
  color: #2c3e50;
}
.content-preview h1 {
  font-size: 2.8em; /* 增大字号 */
  border-bottom: 4px solid #3498db;
  padding-bottom: 0.3em;
  margin-top: 0.5em;
}
.content-preview h2 {
  font-size: 2.3em; /* 增大字号 */
  border-bottom: 3px solid #eaecef;
  padding-bottom: 0.3em;
  position: relative;
}
.content-preview h2::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: #3498db;
}
.content-preview h3 {
  font-size: 1.9em; /* 增大字号 */
  color: #2980b9;
}
.content-preview h4 { 
  font-size: 1.6em; /* 增大字号 */ 
}
.content-preview h5 { 
  font-size: 1.3em; /* 增大字号 */ 
}
.content-preview h6 { 
  font-size: 1.1em; /* 增大字号 */ 
  color: #7f8c8d;
}
/* 段落样式 - 默认左对齐 */
.content-preview p {
  margin-bottom: 1.2em;
  color: #34495e;
  text-align: left; /* 修改为默认左对齐 */
  text-indent: 2em;
}
/* 链接样式 */
.content-preview a {
  color: #3498db;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.content-preview a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #3498db;
  transition: width 0.3s ease;
}
.content-preview a:hover {
  color: #2980b9;
}
.content-preview a:hover::after {
  width: 100%;
}
/* 列表样式 */
.content-preview ul, .content-preview ol {
  padding-left: 1.8em;
  margin: 1.2em 0;
}
.content-preview li {
  margin-bottom: 0.6em;
  color: #34495e;
  position: relative;
}
/* 代码样式 */
.content-preview pre {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid #e9ecef;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}
.content-preview code {
  background-color: #f1f3f4;
  border-radius: 4px;
  padding: 0.2em 0.5em;
  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  color: #e74c3c;
}
.content-preview pre code {
  background-color: transparent;
  padding: 0;
  color: #333;
}
/* 代码块语言标记 */
.content-preview pre.language-javascript code,
.content-preview pre.language-js code {
  color: #2980b9;
}
.content-preview pre.language-python code {
  color: #34495e;
}
.content-preview pre.language-css code {
  color: #e67e22;
}
.content-preview pre.language-html code {
  color: #16a085;
}
/* 引用样式 */
.content-preview blockquote {
  border-left: 4px solid #3498db;
  padding: 12px 20px;
  margin: 1.5em 0;
  background-color: #f8f9fa;
  color: #7f8c8d;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}
.content-preview blockquote p:last-child {
  margin-bottom: 0;
}
/* 图片样式 */
.content-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5em auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-preview img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* 表格样式 - 增强版 */
.content-preview .markdown-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.content-preview .markdown-table thead {
  background-color: #3498db;
  color: white;
}
.content-preview .markdown-table th,
.content-preview .markdown-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}
.content-preview .markdown-table tbody tr {
  background-color: white;
  transition: background-color 0.2s ease;
}
.content-preview .markdown-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}
.content-preview .markdown-table tbody tr:hover {
  background-color: #e3f2fd;
}
/* 响应式表格 */
@media (max-width: 768px) {
  .content-preview .markdown-table {
    display: block;
    overflow-x: auto;
  }
}
/* 任务列表样式 */
.content-preview ul li input[type="checkbox"] {
  margin-right: 8px;
  transform: translateY(2px);
}
/* 水平线样式 */
.content-preview hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #3498db, transparent);
  margin: 2em 0;
}
/* 滚动条美化 */
.content-preview pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.content-preview pre::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.content-preview pre::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.content-preview pre::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .note-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .note-tree {
    width: 100%;
    margin-bottom: 20px;
  }
  .note-title {
    font-size: 24px;
  }
  .content-preview {
    font-size: 15px;
  }
  .editor-header {
    flex-direction: column;
    align-items: stretch;
  }
  .title-editable {
    margin-right: 0;
    margin-bottom: 12px;
  }
  .editor-actions {
    justify-content: flex-end;
  }
}
.tree-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.empty-tree {
  color: #999;
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  transition: all 0.2s ease;
}
.custom-tree-node:hover {
  background-color: rgba(102, 126, 234, 0.1);
  border-radius: 6px;
}
.custom-tree-node .tree-node-actions {
  margin-left: auto;
}
.tree-node-actions .el-button {
  opacity: 0;
  transition: opacity 0.2s;
  transform: scale(0.9);
}
.custom-tree-node:hover .tree-node-actions .el-button {
  opacity: 1;
  transform: scale(1);
}
/* Element UI Tree样式优化 */
:deep(.el-tree-node__content) {
  padding: 6px 2px !important;
  height: auto;
  min-height: 36px;
  align-items: center;
}
:deep(.el-tree-node__label) {
  font-size: 14px;
  color: #333;
}
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: rgba(102, 126, 234, 0.15);
  border-radius: 6px;
}
:deep(.el-tree-node.is-expanded > .el-tree-node__content) {
  background-color: rgba(102, 126, 234, 0.08);
}
:deep(.el-tree) {
  overflow-y: auto;
  flex: 1;
}
:deep(.el-tree::-webkit-scrollbar) {
  width: 6px;
}
:deep(.el-tree::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.05);
}
:deep(.el-tree::-webkit-scrollbar-thumb) {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}
:deep(.el-tree::-webkit-scrollbar-thumb:hover) {
  background: rgba(102, 126, 234, 0.7);
}
.note-editor {
  flex: 1;
  overflow-y: auto;
}
.editor-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
}
.editor-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.editor-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
/* Markdown编辑器样式 */
.markdown-editor {
  width: 100%;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.markdown-editor:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Markdown预览样式 */
.markdown-preview {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  min-height: 400px;
}
.preview-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
/* 编辑器模式切换按钮样式 */
.action-button {
  margin-right: 10px;
  transition: all 0.3s ease;
}
.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.action-button.active {
  background-color: #667eea;
  border-color: #667eea;
  color: white;
}
/* Typora风格的编辑器增强样式 */
.editor-mode-ir {
  /* 所见即所得模式特定样式 */
  transition: all 0.3s ease;
}
.editor-mode-sv {
  /* 分屏预览模式特定样式 */
  transition: all 0.3s ease;
}
.editor-mode-preview {
  /* 纯预览模式特定样式 */
  transition: all 0.3s ease;
}
/* Typora风格的链接样式 */
:deep(.typora-style-link) {
  color: #667eea;
  text-decoration: none;
  border-bottom: 1px solid #667eea;
  padding-bottom: 2px;
  transition: all 0.2s ease;
  position: relative;
}
:deep(.typora-style-link:hover) {
  color: #764ba2;
  border-bottom-color: #764ba2;
  text-decoration: none;
}
/* 编辑器内容区增强 */
:deep(.vditor-ir-content) {
  min-height: calc(100% - 20px);
  padding: 20px;
  line-height: 1.7;
}
/* 编辑模式切换按钮组样式 */
.edit-mode-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}
/* 编辑器工具栏增强 */
:deep(.vditor-toolbar-wrapper) {
  backdrop-filter: blur(8px);
  background-color: rgba(248, 249, 250, 0.95);
}
/* 滚动条样式优化，类似Typora */
:deep(.vditor-preview::-webkit-scrollbar),
:deep(.vditor-ir-content::-webkit-scrollbar),
:deep(.vditor-outline::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}
:deep(.vditor-preview::-webkit-scrollbar-track),
:deep(.vditor-ir-content::-webkit-scrollbar-track),
:deep(.vditor-outline::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
:deep(.vditor-preview::-webkit-scrollbar-thumb),
:deep(.vditor-ir-content::-webkit-scrollbar-thumb),
:deep(.vditor-outline::-webkit-scrollbar-thumb) {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: background 0.3s ease;
}
:deep(.vditor-preview::-webkit-scrollbar-thumb:hover),
:deep(.vditor-ir-content::-webkit-scrollbar-thumb:hover),
:deep(.vditor-outline::-webkit-scrollbar-thumb:hover) {
  background: rgba(0, 0, 0, 0.3);
}
/* 优化表格编辑体验 */
:deep(.vditor-ir table) {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}
:deep(.vditor-ir th),
:deep(.vditor-ir td) {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  text-align: left;
}
:deep(.vditor-ir th) {
  background-color: #f7fafc;
  font-weight: 600;
}
:deep(.vditor-ir tr:hover td) {
  background-color: #f7fafc;
}
/* 优化代码块编辑体验 */
:deep(.vditor-ir pre) {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  overflow-x: auto;
  line-height: 1.5;
}
/* 响应式设计 - 平板设备 (768px-1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 调整左侧树和右侧编辑器的比例 */
  .content-container {
    display: flex;
    flex-direction: column;
  }
  .tree-container {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: auto;
  }
  .editor-container {
    width: 100%;
    height: calc(100vh - 300px);
  }
  /* 调整Vditor编辑器高度 */
  .vditor-container {
    height: 100%;
  }
  /* 调整工具栏按钮大小 */
  :deep(.vditor-toolbar__item) {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  /* 减少工具栏显示的按钮数量，部分按钮放入更多菜单 */
  :deep(.vditor-toolbar__item:nth-child(n+20)) {
    display: none;
  }
  /* 调整内容区域内边距 */
  :deep(.vditor-ir-content) {
    padding: 15px;
  }
  /* 大纲面板在平板上自动隐藏 */
  :deep(.vditor-outline) {
    display: none;
  }
  /* 调整编辑模式切换按钮 */
  .edit-mode-buttons {
    flex-wrap: wrap;
  }
  .action-button {
    margin-bottom: 8px;
    font-size: 12px;
    padding: 6px 12px;
  }
}
/* 响应式设计 - 移动设备 (<768px) */
@media (max-width: 750px) {
  /* 单列布局 */
  .content-container {
    display: flex;
    flex-direction: column;
  }
  .tree-container {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
  }
  .editor-container {
    width: 100%;
    height: calc(100vh - 250px);
  }
  /* 简化Vditor编辑器 */
  .vditor-container {
    height: 100%;
    border-radius: 4px;
  }
  /* 简化工具栏，只显示最常用按钮 */
  :deep(.vditor-toolbar) {
    overflow-x: auto;
    white-space: nowrap;
  }
  :deep(.vditor-toolbar__item) {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  /* 隐藏大部分工具栏按钮，仅保留核心功能 */
  :deep(.vditor-toolbar__item:nth-child(n+12)) {
    display: none;
  }
  /* 进一步减少内容区域内边距 */
  :deep(.vditor-ir-content) {
    padding: 10px;
    font-size: 14px;
  }
  /* 隐藏大纲面板 */
  :deep(.vditor-outline) {
    display: none;
  }
  /* 编辑模式切换按钮适应移动设备 */
  .edit-mode-buttons {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
  }
  .action-button {
    margin-right: 0;
    margin-bottom: 5px;
    font-size: 12px;
    padding: 6px 12px;
  }
  /* 调整标题大小 */
  :deep(.vditor-ir h1) {
    font-size: 22px;
  }
  :deep(.vditor-ir h2) {
    font-size: 20px;
  }
  :deep(.vditor-ir h3) {
    font-size: 18px;
  }
  /* 调整表格样式以适应移动设备 */
  :deep(.vditor-ir table) {
    font-size: 12px;
  }
  :deep(.vditor-ir th),
  :deep(.vditor-ir td) {
    padding: 6px 8px;
  }
  /* 调整代码块大小 */
  :deep(.vditor-ir pre) {
    font-size: 12px;
    padding: 12px;
  }
}
/* 响应式设计 - 大屏设备 (>1440px) */
@media (min-width: 1440px) {
  /* 增加左侧树宽度 */
  .tree-container {
    width: 350px;
  }
  /* 增加编辑器区域宽度 */
  .editor-container {
    width: calc(100% - 370px);
  }
  /* 优化编辑体验 */
  :deep(.vditor-ir-content) {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
  }
  /* 优化大纲显示 */
  :deep(.vditor-outline) {
    width: 280px;
  }
  /* 增加工具栏按钮间距 */
  :deep(.vditor-toolbar__item) {
    margin-right: 2px;
  }
}
/* 针对平板和移动设备的特殊处理 - 确保编辑模式按钮正常显示 */
@media (max-width: 1023px) {
  /* 确保编辑模式切换按钮组能够水平滚动 */
  .edit-mode-buttons {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .edit-mode-buttons::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
  /* 确保Vditor编辑器在小屏幕上能正确初始化 */
  .vditor-container {
    position: relative;
    min-height: 300px;
  }
  /* 在小屏幕上禁用分屏预览模式，强制使用所见即所得或纯预览模式 */
  .editor-mode-sv {
    display: none;
  }
  /* 自动调整编辑器高度以适应小屏幕 */
  .auto-height-vditor {
    height: auto !important;
    min-height: 300px;
  }
}
/* 编辑器容器的响应式过渡效果 */
.vditor-container {
  transition: all 0.3s ease;
}
/* 确保在窗口调整大小时编辑器能够正确响应 */
@media (orientation: landscape) and (max-height: 500px) {
  .tree-container {
    height: 100px;
  }
  .editor-container {
    height: calc(100vh - 200px);
  }
}
/* 引用样式增强 */
:deep(.vditor-ir blockquote) {
  border-left: 4px solid #667eea;
  padding: 12px 20px;
  margin: 16px 0;
  background-color: #f7fafc;
  color: #718096;
  border-radius: 0 4px 4px 0;
}
/* 列表样式增强 */
:deep(.vditor-ir ul),
:deep(.vditor-ir ol) {
  padding-left: 2em;
  margin: 12px 0;
}
:deep(.vditor-ir li) {
  margin-bottom: 8px;
}
/* 标题样式增强 */
:deep(.vditor-ir h1),
:deep(.vditor-ir h2),
:deep(.vditor-ir h3),
:deep(.vditor-ir h4),
:deep(.vditor-ir h5),
:deep(.vditor-ir h6) {
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  transition: all 0.3s ease;
}
/* 实现Typora风格的图片预览 */
:deep(.vditor-ir img) {
  transition: all 0.3s ease;
  border-radius: 4px;
  cursor: pointer;
}
:deep(.vditor-ir img:hover) {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* Markdown内容样式 - 增强版 */
.preview-content .md-heading {
  color: #2c3e50;
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.preview-content .h1 {
  font-size: 28px;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
  color: #2c3e50;
}
.preview-content .h2 {
  font-size: 24px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
  color: #34495e;
}
.preview-content .h3 {
  font-size: 20px;
  color: #4a5568;
}
.preview-content .h4 {
  font-size: 18px;
  color: #636e72;
}
.preview-content .h5 {
  font-size: 16px;
  color: #636e72;
}
.preview-content .h6 {
  font-size: 14px;
  color: #636e72;
  font-weight: 500;
}
.preview-content .md-paragraph {
  margin-bottom: 16px;
  color: #4a5568;
  text-align: justify;
  line-height: 1.8;
}
.preview-content .md-bold {
  font-weight: 700;
  color: #2c3e50;
}
.preview-content .md-italic {
  font-style: italic;
  color: #7f8c8d;
}
.preview-content .md-link {
  color: #667eea;
  text-decoration: none;
  border-bottom: 1px solid #667eea;
  padding: 0 3px;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
.preview-content .md-link:hover {
  color: #ffffff;
  background-color: #667eea;
  border-bottom-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.preview-content .md-list {
  margin: 1em 0 1.5em 0;
  padding-left: 1.5em;
}
.preview-content .md-list-ul {
  list-style-type: none;
}
.preview-content .md-list-ul .md-list-item::before {
  content: '•';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: -1.2em;
}
.preview-content .md-list-ol {
  list-style-type: none;
  counter-reset: item;
}
.preview-content .md-list-ol .md-list-item {
  position: relative;
  padding-left: 1.5em;
}
.preview-content .md-list-ol .md-list-item::before {
  counter-increment: item;
  content: counter(item) '.';
  position: absolute;
  left: -1.5em;
  color: #667eea;
  font-weight: 600;
}
.preview-content .md-list-item {
  margin-bottom: 10px;
  color: #4a5568;
  padding-left: 10px;
  position: relative;
}
.preview-content .md-blockquote {
  border-left: 4px solid #667eea;
  padding: 15px 20px;
  margin: 20px 0;
  background-color: #f7fafc;
  color: #718096;
  font-style: italic;
  border-radius: 0 6px 6px 0;
  position: relative;
  transition: all 0.3s ease;
}
.preview-content .md-blockquote:hover {
  background-color: #f1f5f9;
  transform: translateX(5px);
}
.preview-content .md-blockquote.level-2 {
  border-left-color: #764ba2;
  margin-left: 20px;
}
.preview-content .md-blockquote.level-3 {
  border-left-color: #f093fb;
  margin-left: 40px;
}
.preview-content .md-code-inline {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background-color: #f1f5f9;
  color: #e53e3e;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
}
.preview-content .md-code-block {
  background-color: #2d3748;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 25px 0;
  border: 1px solid #4a5568;
}
.preview-content .md-code-block:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.preview-content .md-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #e2e8f0;
}
.preview-content .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.preview-content .md-table:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.preview-content .md-table-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.preview-content .md-table-cell {
  padding: 12px 15px;
  border-bottom: 1px solid #e2e8f0;
  color: #4a5568;
}
.preview-content .md-table tr:hover .md-table-cell {
  background-color: #f7fafc;
}
.preview-content .md-table tr:last-child .md-table-cell {
  border-bottom: none;
}
.preview-content .md-hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, transparent, #667eea, transparent);
  margin: 40px 0;
  position: relative;
}
.preview-content .md-hr::before {
  content: '❦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 0 20px;
  color: #667eea;
  font-size: 18px;
}
.preview-content .md-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin: 25px auto;
  display: block;
  transition: all 0.4s ease;
  border: 4px solid white;
}
.preview-content .md-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}
/* 响应式设计 */
@media screen and (max-width: 768px) {
  .note-container {
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }
  .note-tree {
    width: 100%;
    max-height: 300px;
  }
  .el-tree {
    max-height: 200px;
  }
  .editor-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .title-input {
    width: 100% !important;
  }
}
.empty-editor {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>